web-streams-polyfill

What is web-streams-polyfill?

The web-streams-polyfill package is a polyfill for the Streams API, which provides a standard interface for representing and handling a sequence of data in JavaScript. This polyfill allows developers to use the Streams API in environments where it is not natively supported.

What are web-streams-polyfill's main functionalities?

ReadableStream

This feature allows you to create a stream of data that can be read in chunks. The code sample demonstrates how to create a simple ReadableStream that enqueues two chunks of data and then closes the stream.

const readableStream = new ReadableStream({
  start(controller) {
    controller.enqueue('Hello, ');
    controller.enqueue('World!');
    controller.close();
  }
});

readableStream.getReader().read().then(({ value, done }) => {
  if (!done) console.log(value);
});

WritableStream

This feature allows you to create a stream where data can be written. The code sample shows how to create a WritableStream and write a chunk of data to it, then close the stream.

const writableStream = new WritableStream({
  write(chunk) {
    console.log(chunk);
  },
  close() {
    console.log('Stream closed');
  }
});

const writer = writableStream.getWriter();
writer.write('Hello, World!').then(() => writer.close());

TransformStream

This feature allows you to create a stream that transforms data as it passes through. The code sample demonstrates how to create a TransformStream that converts chunks of text to uppercase and then pipes data from a ReadableStream through it to a WritableStream.

const uppercaseTransform = new TransformStream({
  transform(chunk, controller) {
    controller.enqueue(chunk.toUpperCase());
  }
});

const readable = new ReadableStream({
  start(controller) {
    controller.enqueue('hello');
    controller.enqueue('world');
    controller.close();
  }
});

const writable = new WritableStream({
  write(chunk) {
    console.log(chunk);
  }
});

readable.pipeThrough(uppercaseTransform).pipeTo(writable);

Other packages similar to web-streams-polyfill

stream-browserify

This package is a browserify version of the Node.js core streams module. It provides similar functionality for handling streams of data but is designed to mimic Node.js streams specifically, rather than implementing the Web Streams API.

readable-stream

This package is a mirror of the Streams API from Node.js for use in browsers and other environments. It is similar to web-streams-polyfill but focuses on Node.js compatibility and may have differences in API and behavior compared to the Web Streams API.

blob-polyfill

While not a direct alternative to web-streams-polyfill, blob-polyfill provides Blob support in browsers that do not natively support the Blob constructor. It can be used in conjunction with streams to handle binary data.

README

web-streams-polyfill

Web Streams, based on the WHATWG spec reference implementation.

Links

• Official spec
• Reference implementation

Usage

This library comes in multiple variants:

• web-streams-polyfill: a ponyfill that provides the stream implementations without replacing any globals, targeting ES2015+ environments. Recommended for use in Node 6+ applications, or in web libraries supporting modern browsers.
• web-streams-polyfill/es5: a ponyfill targeting ES5+ environments. Recommended for use in legacy Node applications, or in web libraries supporting older browsers.
• web-streams-polyfill/polyfill: a polyfill that replaces the native stream implementations, targeting ES2015+ environments. Recommended for use in web apps supporting modern browsers through a <script> tag.
• web-streams-polyfill/polyfill/es5: a polyfill targeting ES5+ environments. Recommended for use in web apps supporting older browsers through a <script> tag.

Each variant also includes TypeScript type definitions, compatible with the DOM type definitions for streams included in TypeScript. These type definitions require TypeScript version 4.7 or higher.

In version 4, the list of variants was reworked to have more modern defaults and to reduce the download size of the package. See the migration guide for more information.

Usage as a polyfill:

<!-- option 1: hosted by unpkg CDN -->
<script src="https://unpkg.com/web-streams-polyfill/dist/polyfill.js"></script>
<!-- option 2: self hosted -->
<script src="/path/to/web-streams-polyfill/dist/polyfill.js"></script>
<script>
var readable = new ReadableStream();
</script>

Usage as a Node module:

var streams = require("web-streams-polyfill");
var readable = new streams.ReadableStream();

Usage as a ponyfill from within a ES2015 module:

import { ReadableStream } from "web-streams-polyfill";
const readable = new ReadableStream();

Usage as a polyfill from within an ES2015 module:

import "web-streams-polyfill/polyfill";
const readable = new ReadableStream();

Compatibility

The polyfill and ponyfill variants work in any ES2015-compatible environment.

The polyfill/es5 and ponyfill/es5 variants work in any ES5-compatible environment that has a global Promise. If you need to support older browsers or Node versions that do not have a native Promise implementation (check the support table), you must first include a Promise polyfill (e.g. promise-polyfill).

Async iterable support for ReadableStream is available in all variants, but requires an ES2018-compatible environment or a polyfill for Symbol.asyncIterator.

WritableStreamDefaultController.signal is available in all variants, but requires a global AbortController constructor. If necessary, consider using a polyfill such as abortcontroller-polyfill.

Reading with a BYOB reader is available in all variants, but requires ArrayBuffer.prototype.transfer() or structuredClone() to exist in order to correctly transfer the given view's buffer. If not available, then the buffer won't be transferred during the read.

Tooling compatibility

This package uses subpath exports for its variants. As such, you need Node 12 or higher in order to import or require() such a variant.

When using TypeScript, make sure your moduleResolution is set to "node16", "nodenext" or "bundler".

Compliance

The polyfill implements version 4dc123a (13 Nov 2023) of the streams specification.

The polyfill is tested against the same web platform tests that are used by browsers to test their native implementations. The polyfill aims to pass all tests, although it allows some exceptions for practical reasons:

• The default (ES2015) variant passes all of the tests, except for the test for the prototype of ReadableStream's async iterator. Retrieving the correct %AsyncIteratorPrototype% requires using an async generator (async function* () {}), which is invalid syntax before ES2018. Instead, the polyfill creates its own version which is functionally equivalent to the real prototype.
• The ES5 variant passes the same tests as the ES2015 variant, except for various tests about specific characteristics of the constructors, properties and methods. These test failures do not affect the run-time behavior of the polyfill. For example:
  • The name property of down-leveled constructors is incorrect.
  • The length property of down-leveled constructors and methods with optional arguments is incorrect.
  • Not all properties and methods are correctly marked as non-enumerable.
  • Down-leveled class methods are not correctly marked as non-constructable.

Contributors

Thanks to these people for their work on the original polyfill:

• Diwank Singh Tomer (creatorrr)
• Anders Riutta (ariutta)

Changelog

4.0.0 (2024-02-28)

• 💥 Rework the list of variants to have more modern defaults. The table below shows how to upgrade your v3 import to their equivalent v4 import. See the migration guide for more information. (#82, #139)
• 💥 Remove the ES2018 variant, in favor of the ES2015 variant.
• 💥 Switch to subpath exports for variants.
  • Node 12 or higher is required to import or require() a variant.
  • When using TypeScript, version 4.7 or higher is now required. Additionally, moduleResolution must be set to "node16", "nodenext" or "bundler".
• 🚀 Support importing as ESM in Node.
• 💅 Minify all code in the published package, to reduce the download size.
• 💅 Rework ReadableStream.from() implementation to avoid depending on async function* down-leveling for ES5. (#144)

| v3 import | v4 import | description | | --- | --- | --- | | web-streams-polyfill | web-streams-polyfill/polyfill/es5 | ES5+ polyfill | | web-streams-polyfill/es6 | web-streams-polyfill/polyfill | ES2015+ polyfill | | web-streams-polyfill/es2018 | web-streams-polyfill/polyfill | ES2015+ polyfill | | web-streams-polyfill/ponyfill | web-streams-polyfill/es5 | ES5+ ponyfill | | web-streams-polyfill/ponyfill/es6 | web-streams-polyfill | ES2015+ ponyfill | | web-streams-polyfill/ponyfill/es2018 | web-streams-polyfill | ES2015+ ponyfill |